<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>会议室预定/签到</el-breadcrumb-item>
            <el-breadcrumb-item>快速预定</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card style="text-align: left">
            <el-form ref="form" :model="form" :rules="rules" label-width="150px">
                    <el-form-item label="选择日期" prop="date">
                        <el-col :span="8">
                            <el-select v-model="form.date" placeholder="请选择日期">
                                <el-option
                                        v-for="item in optionsDate"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>

                    <el-form-item label="选择时间：" prop="time">
                        <el-col :span="8">
                            <el-select v-model="form.time" placeholder="请选择时间">
                                <el-option
                                        v-for="item in optionsTime"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="会议参与人数：" prop="people_count">
                        <el-col :span="6">
                            <el-input v-model="form.people_count"></el-input>
                        </el-col>
                    </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit(form)">立即创建</el-button>
                </el-form-item>

                <!--<el-form-item label="盘点开始时间" prop="checkStartTime">
                  <el-date-picker
                    type="datetime"
                    placeholder="请选择开始时间"
                    style="width: 100%"
                    clearable
                    format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="pickerOptions"
                    v-model="inventoryEdit.checkStartTime"
                  ></el-date-picker>
                </el-form-item>-->
            </el-form>
            <br>
            <span v-if="check" style="font-family: '华文仿宋';font-size: x-large;float: left">预约结果:</span>
            <br>
            <br>
            <el-table
                    v-if="check"
                    :data="roomList"
                    style="width: 65%;margin-bottom: 20px;"
                    row-key="cid"
                    border
                    default-expand-all
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column
                        prop="cid"
                        label="会议室ID"
                        sortable
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="会议室名"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="会议室类型"
                        width = "200">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.type === '报告厅'" type="success">
                            报告厅
                        </el-tag>
                        <el-tag v-else-if="scope.row.type === '大型会议室'" type="danger">
                            大型会议室
                        </el-tag>
                        <el-tag v-else-if="scope.row.type === '圆桌会议室'" type="info">
                            圆桌会议室
                        </el-tag>
                        <el-tag v-else-if="scope.row.type === '小型会议室'" type="error">
                            小型会议室
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="capacity"
                        label="容纳人数"
                        width="222">
                </el-table-column>
            </el-table>
        </el-card>

    </div>
</template>
<script>
    import moment from "moment"
    export default {
        data() {
            return {
                check:false,
                optionsTime: [{
                        value: '08:00:00-10:00:00',
                        label: "08:00:00-10:00:00"
                    }, {
                        value: '10:00:00-12:00:00',
                        label: "10:00:00-12:00:00"
                     },
                    {
                        value: '14:00:00-16:00:00',
                        label: "14:00:00-16:00:00"
                    }, {
                        value: '16:00:00-18:00:00',
                        label: "16:00:00-18:00:00"
                    },
                    {
                        value: '18:00:00-20:00:00',
                        label: "18:00:00-20:00:00"
                    }],
                optionsDate: [{
                    value: moment().format('YYYY-MM-DD'),
                    label: moment().format('YYYY-MM-DD')
                }, {
                    value: moment().add(1, 'day').format('YYYY-MM-DD'),
                    label: moment().add(1, 'day').format('YYYY-MM-DD')
                }],
                form: {
                    people_count: null,
                    date: "",
                    time: "",
                    startTime:"",
                    endTime:""
                },
                roomList:[],

                time:[],

                rules: {
                    people_count: [
                        { required: true, message: "会议参与人数不能为空", trigger: "blur" },
                    ],
                    date: [
                        { required: true, message: "起始时间不能为空", trigger: "change" },
                    ],
                    time: [
                        { required: true, message: "起始时间不能为空", trigger: "change" },
                    ],
                }

            };
        },
        mounted() {
            let data = window.sessionStorage.getItem("userdata")
            let id = window.sessionStorage.getItem("id")
            console.log(id)
            console.log(window.sessionStorage.getItem("username"))
            this.getDate()
        },
        methods: {
            getDate(){
                let t = moment().format('YYYY-MM-DD')
                let fut = moment().add(1, 'day').format('YYYY-MM-DD')
                console.log(t,fut)
            },
            onSubmit(form) {
                if (this.form.people_count!=null && this.form.date!=null&& this.form.time!=null){
                    this.time = this.form.time.split("-")
                    console.log(this.time[0])
                    console.log(this.time[1])
                    this.form.startTime = this.form.date + " " + this.time[0]
                    this.form.endTime = this.form.date + " " + this.time[1]
                }

                this.$axios({
                    method:"post",
                    url:"http://localhost:80/orderrecord/checkRecords",
                    params:{
                        count:this.form.people_count,
                        startTime:this.form.startTime,
                        endTime:this.form.endTime,
                         uId: window.sessionStorage.getItem("id")
                    }
                }).then(res=>{
                    console.log(res)
                    this.roomList.push(res.data.roomList)
                    if (this.roomList!=null){
                        this.check = true
                        this.$message.success("预约成功！")
                    }
                })
            },
        },
    };
</script>

<style>
</style>
